<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .btn1{
            background-color: rgb(121, 100, 237);
        }
        .btn2{
            background-color: cornflowerblue;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="../static/学生端.css">
    <link rel="stylesheet" href="../static/iconfont/iconfont.css">
    <title>我的已选课程</title>
</head>
<body>
<div class="head">
    <div class="header">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<img width=36 height=36 src="../static/xh.png"/><img width=180 height=36 src="../static/wz.png"/>
        <a href="/student/login" class="exit"><i class="iconfont icon-tuichu"></i>退出登录</a></div>
</div>
<div class="big_box">
<div class="wrap">
    <div class="seg"></div>
    <div class="item_title">
        <b>学生端</b>
    </div>
    <div class = "seg"></div>
    <div class="item">
        <a href="/student/mycourse"><i class="iconfont icon-yixuan"></i>&ensp;已选课程</a>
    </div>
    <div class="item">
        <a href="/student/election"><i class="iconfont icon-tianjia"></i>&ensp;选新课程</a>
    </div>
    <div class="item">
        <a href="/student/reelection"><i class="iconfont icon-shanchu"></i>&ensp;退选课程</a>
    </div>
    <div class="item">
        <a href="/student/学生个人信息"><i class="iconfont icon-gerenxinxi"></i>&ensp;个人信息</a>
    </div>
</div>
    <div class="main">
        <div class="row">
                <h1>
                    我的已选课程
                </h1>
            <div class="selected">
                <form>
                请选择年级&nbsp;
                    <select class="xq" onchange=selected() id="senior" style="color: #295287;">
                    <option value="1">大一上学期</option>
                    <option value="2">大一下学期</option>
                        <option value="3">大二上学期</option>
                        <option value="4">大二下学期</option>
                        <option value="5">大三下学期</option>
                        <option value="6">大三下学期</option>
                    </select>
                    <input type="button" class="button" value="检索" onclick="search()"/>
                </form>
            </div>
                <div class="course_table" id="course_table" style="display: none;">
                    <table class="table" id="tt" >
                        <thead>
                        <tr>
                            <th>课程号</th>
                            <th>课程名</th>
                            <th>课程时长</th>
                            <th>课程学分</th>
                            <th>上课时间</th>
                            <th>上课地点</th>
                            <th>可选人数</th>
                            <th>课程类别</th>
                            <th>授课教师</th>
                        </tr>
                        </thead>
                    </table>
                </div>
        </div>
    </div>
</div>
<script>
    function search() {
        document.getElementById("course_table").style.display = "block";
        var select = document.getElementById("senior");
        var term = select.value;
        $.ajax({
            type: "post",
            url: "/student/imycourse",
            data: {"term": term},
            dataType: "json",
            success: function (dat) {
                var str="";
                var list = dat.infoList;
                $.each(list, function (index, course) {
                    var stra = '<tr><td>' + course.courseid +
                        '</td><td>' + course.coursename +
                        '</td><td>' + course.coursetime +
                        '</td><td>' + course.coursescore +
                        '</td><td>' + course.time +
                        '</td><td>' + course.site +
                        '</td><td>' + course.number +
                        '</td><td>' + course.classify +
                        '</td><td>' + course.teacher +
                        '</td></tr>';
                    str = str + stra;
                })
                $("#tt tr:gt(0)").remove();
                $("#tt").append(str);
            }
        })

    }
</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script>window.jp || document.write('<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.24/assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.24/dist/js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.24/assets/js/vendor/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.24/assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>